<template>
  <div class="container">
    <div class="leftMenu">
      <p @click="change(item.id)" v-for="item in category_list">
        <img :src="item.image" alt="" />
        <span :class="{ active: left_id == item.id }">{{item.name}}</span>
      </p>
    </div>
    <div class="main">
      <div class="tabs">
        <p @click="show = true">
          <img src="@/assets/main-title-bg.png" alt="" />
          <span :class="{ active: show }">整体数据</span>
        </p>
        <p @click="show = false">
          <img src="@/assets/main-title-bg.png" alt="" /><span
            :class="{ active: !show }"
            >个人数据</span
          >
        </p>
        <div class="select" v-show="!show">
          <el-select v-model="id" placeholder="请选择"  @change="selectChanged">
            <el-option
             v-for="item in user_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <!-- <div>后期删掉---顶部id--{{ task_id }}--左边id--{{ left_id }}</div> -->
        <img class="bg" src="@/assets/main-title-line.png" alt="" />
      </div>
      <div class="row" v-if="show">
        <div class="col" v-for="(group,index) in list">
          <div class="item">
            <div class="title">{{group.group_name}}</div>
            <div class="chartBox" v-if="group.id != 7">
              <barChart :chartId="`barChart`+(index+1)" :datas="group.data_list" v-if="group.id != 6 && group.id != 7" />
              <lineChart :chartId="`lineChart`+(index+1)" :datas="group.data_list" v-if="group.id == 6" />
            </div>
            <div class="chartBox flex" v-if="group.id == 7">
              <div v-for="(group2,index2) in group.data_list">
                <gaugeChart :chartId="`gaugeChart`+(index2+1)" :datas="group2" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <personalData v-else :user="user" />
    </div>
  </div>
</template>
<script>
import { computed } from "vue";
import { mapState, mapMutations } from "vuex";
export default {
  name: "evaluateView",
  data() {
    return {
      show: true,
      category_list:[],
      list:[],
      id: "",
      user_list:[],
      user: [],
    };
  },
  components: {
    barChart: () => import("@/components/barChart.vue"),
    lineChart: () => import("@/components/lineChart.vue"),
    gaugeChart: () => import("@/components/gaugeChart.vue"),
    personalData: () => import("@/components/personalData.vue"),
  },
  computed: {
    ...mapState(["task_id", "left_id"]),
  },
  watch:{
    task_id(){
      // console.log(this.task_id)
      this.get_target_data();
    },
    left_id(){
      // console.log(this.left_id)
      this.get_target_data();
    }
  },
  mounted() {
    this.get_category_list();
    this.get_user_list();
  },
  methods: {
    ...mapMutations(["changeLeftId"]),
    change(id) {
      this.$store.commit("changeLeftId", id);
    },
    get_category_list() {
      this.$post("/index/get_category_list",{pid:15}).then((res) => {
        // console.log(res)
        this.category_list = res.data
        this.$store.commit("changeLeftId", this.category_list[0].id);
      });
    },
    get_target_data() {
      if(this.task_id == '' || this.left_id == '') return
      this.$post("/index/get_target_data",{task_id:this.task_id,category_id:this.left_id}).then((res) => {
        // console.log(res)
        this.list = res.data.list
      });
    },
    get_user_list(){
      this.$post("/index/get_user_data").then((res) => {
        // console.log(res)
        this.user_list = res.data.user_list
        this.id = this.user_list[0].id
        this.user = this.user_list[0];
      });
    },
    selectChanged(value)
    {
      // console.log(value);
      let that = this
      this.user_list.forEach(function (item, index) {
        // console.log(item);
        if(item.id == value) that.user = item;
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.tabs {
  display: flex;
  position: relative;
  z-index: 9;
  .bg {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  p {
    margin-right: 20px;
    position: relative;
    position: relative;
    z-index: 9;
    span {
      position: absolute;
      top: 0;
      left: 0;
      font-size: 22px;
      display: block;
      width: 100%;
      text-align: center;
      line-height: 50px;
      color: #72e6ff;
      cursor: pointer;
    }
    .active {
      color: #fff;
    }
  }
}
.flex {
  display: flex;
  & > div {
    width: 50%;
    height: 100%;
  }
}
.container {
  display: flex;
  .leftMenu {
    width: 280px;
    p {
      cursor: pointer;
      background: url("@/assets/left-bg.png") center center no-repeat;
      background-size: cover;
      width: 243px;
      height: 103px;
      margin-bottom: 43px;
      font-weight: bold;
      display: flex;
      align-items: center;
      padding-left: 18px;
      color: #68e7f1;
      font-size: 24px;
      .active {
        color: #fff;
      }
    }
  }
  .main {
    width: calc(100% - 320px);
  }
}

:deep .select {
  position: relative;
  width: 200px;
  background: rgba($color: #050d30, $alpha: 0.7);
  border: 1px solid #01b2ff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  z-index: 9;
  .el-icon-arrow-up:before {
    content: "\e790";
  }
  .el-select .el-input .el-select__caret {
    color: #72e6ff;
  }
  .el-input__inner {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
  }
}
</style>
